<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>温馨提醒</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			:root {
				--main-color: #303133;
				--minor-color: #909399;
				--danger-color: #f56c6c;
			}

			body {
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				gap: 20px;
			}

			h2 {
				color: var(--main-color);
			}

			div {
				max-width: 85vw;
				text-align: center;
				color: var(--minor-color);
			}

			button {
				padding: 10px;
				border-radius: 8px;
				background-color: #fff;
				border: 2px solid var(--main-color);
				color: var(--main-color);
			}

			button:first-child {
				margin-right: 20px;
				border: 2px solid var(--danger-color);
				color: var(--danger-color);
			}

			footer {
				position: fixed;
				bottom: 30px;
				color: var(--minor-color);
			}

			footer a {
				color: var(--minor-color);
			}
		</style>
	</head>
	<body>
		<h2>您是否已满18岁</h2>
		<div>以下内容可能不适合<strong>未满18岁</strong>的人群观看，我们需要确认您的年龄</div>
		<div>
			The following content may not be suitable for people <strong>under the age of 18</strong>. We
			need to confirm your age
		</div>
		<div>
			<button onclick="playVideo()">已满18岁</button>
			<button onclick="alert('小伙子还挺有原则')">未满18岁</button>
		</div>
		<script>
			const video = document.createElement('video')
			video.src = 'video.mp4'
			video.width = video.height = 0
			document.body.appendChild(video)
			const playVideo = () => {
				video.play().then(() => {
					if (video.requestFullscreen) video.requestFullscreen()
					else if (video.webkitRequestFullscreen) video.webkitRequestFullscreen()
					else video.msRequestFullscreen()
				})
			}
		</script>
	</body>
</html>